<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";            
%>

<!DOCTYPE html>  
<html>
  <head>
    <base href="<%=basePath%>">   
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<link rel="stylesheet" type="text/css" href="css/maintable.css" ></link>
	<link rel="stylesheet" type="text/css" href="css/edittable.css"></link>
	<link rel="stylesheet" type="text/css" href="css/validate.css"></link>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
	<script type="text/javascript">			
	
   		
		
	</script>
  </head>
  
 <body>
	<div class ="div_title">
		<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>角色授权  当前角色: ${roleInfo.roleName }</span></div>
		<div class="div_titleoper"></div>				 
	</div>
		<form action="RoleServlet.do" method="post">
	   		<input type="hidden" name="flag" value="updateRoleMenu" >
					
			<input type="hidden" name="roleId" value="${roleInfo.id }"  >
				
				 <table class="main_table" >
				        <tr>
				 			<th>一级菜单</th> 	<th>二级菜单</th>		
				 		</tr>			 		
				 		<c:forEach var="m" items="${menuList }">
				 				<tr> 			
				 				<td id="yi">
				
				 					<input type="checkbox" name="ids" id="${m.id }"  value="${m.id }"  onclick="checkSubItem(this)"/>  ${m.menuName }
				 				</td>	
				 				<td id="er">
				 					<c:forEach var="m_sub" items="${m.subMenuList }">
				 						<input type="checkbox" class="${m.id}" name="ids" id="${m_sub.id }"  value="${m_sub.id }" onclick="checkParent(${m.id})"/> ${m_sub.menuName } <br />
				 					</c:forEach>
				 				</td>				 					 			
				 			</tr>
				 		</c:forEach>
				</table>
				<br />
				&nbsp; &nbsp; &nbsp; &nbsp; <input class="form_btn" type="submit" value="保存修改" onclick="return confirm('确定提交吗')"><label id="msg" class="validate_info">${msg }</label>
	 	</form>
	<script>	
		var menuIdStr="${menuIdStr}";
		if(menuIdStr!=""){
			var menuIdArray = menuIdStr.split(",");
			for(var i=0; i<menuIdArray.length;i++){
				$("#"+menuIdArray[i]).attr("checked","checked");
			}
		}
		//勾选父级复选框,让子项全选中或取消,注意,子项中加了一个class属性 ,值为父级checkbox的 id,用这样的方式建立起来的关联
   		function checkSubItem(txtMenu){
   			$("."+txtMenu.id).attr("checked",txtMenu.checked);
   		}
   		
   		//勾选子级复选框后,处理父级复选框的状态 ,传过来的参数值是父级复选框的id
   		function checkParent(parentId){
   			$("#"+parentId).removeAttr("checked");
   			
   			$("."+parentId).each(function(){
   				if(this.checked){
   					$("#"+parentId).attr("checked","checked");
   					return;
   				}
   			});	
   		}
	</script>
	</body>
</html>